/*
* @Author: sunfuping
* @Date: 2019-08-06 10:39:11
* @Last Modified by: sunfuping
* @Last Modified time: 2020-01-08 15:08:16
* 资产配置报告
*/

<template>
    <section class="assetReport">
        <page-title :title="ruleTitle" :backUrl="backUrl"></page-title>
        <div class="midContent">
            <!-- 封皮 begin -->
            <div class="firstPage">
                <img src="../../img/first.png" alt="">
                <!--<p @click="produce()" v-show="!isWechat ">生成资产配置建议书></p>-->
            </div>
            <!-- 封皮 end -->

            <!-- 名片 begin -->
            <div class="nameBox clearfix">
                <div class="bigCardBox">
                    <div class="cardBox">
                        <div class="cardBody clearfix">
                            <div class="bigPhoto">
                                <div class="boxF">
                                    <div class="boxS">
                                        <div class="boxT" v-if='infoData.portraitURL'
                                             :style="{backgroundImage: 'url('+ infoData.portraitURL+')'}"></div>
                                        <div class="boxT" v-else-if='infoData.sex==0'
                                             :style="{backgroundImage: 'url('+ girPng +')'}"></div>
                                        <div class="boxT" v-else :style="{backgroundImage: 'url('+ boyPng +')'}"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="bigNameBox">
                                <!--姓名-->
                                <div class="bigNameTxt">{{infoData.name}}</div>
                                <!--公司和职位-->
                                <div class="bigDiscridTxt"><span></span> {{infoData.companyName}} <i
                                    v-if="infoData.postName">-{{infoData.postName}}</i></div>
                            </div>
                        </div>
                    </div>
                    <div class="bigLineBox"><img src="../../img/line.png" alt=""></div>
                    <div class="wayBox">
                        <div class="wayLeft">
                            <div class="phoneNo">
                                <b><img src="../../img/phone.png" alt=""></b>
                                <span>&nbsp;{{infoData.mobile}}</span>
                            </div>
                            <div class="emailAd">
                                <img src="../../img/email.png" alt="">
                                <span>&nbsp;{{infoData.email}}</span>
                            </div>
                        </div>
                        <div class="wayRight">
                            <a class="bigWeChatBox" href="javaScript:;" id="weChat1" @click='touchQr()'><img
                                src="../../img/bigWechat.png" alt=""></a>
                            <a class="bitToContract" href="javaScript:;" id="mobile1" @click="touchPh()"><img
                                src="../../img/bigPhone.png" alt=""></a>
                        </div>
                    </div>
                </div>
                <div class="packUp">
                    <div class="packUpTxtBox">
                        <span class="packUpTxt" v-show="!packUpShow" @click="packUp">收起以下名片信息 <img
                            src="../../img/up.png" alt=""></span>
                        <span class="packUpTxt" v-show="packUpShow" @click="packDown">展开以下名片信息 <img
                            src="../../img/down.png" alt=""></span>
                    </div>
                    <div class="packUpDetails" v-show="!packUpShow">
                        <!-- <div class="line"> -->
                        <!-- <img src="../../img/line1.png" alt=""> -->
                        <!-- </div> -->
                        <ul class="upDetails">
                            <li class="font clearfix" v-if="infoData.mobile">
                                <div class="fontLeft">电话</div>
                                <div class="fontCenter">{{infoData.mobile}}</div>
                                <div class="btn"><a :href="mobileFunction">拨打</a></div>
                            </li>
                            <li class="font clearfix" v-if="infoData.email">
                                <div class="fontLeft">邮箱</div>
                                <div class="fontCenter">{{infoData.email}}</div>
                                <div class="btn" v-clipboard:copy="infoData.email" v-clipboard:success="onCopy"
                                     v-clipboard:error="onError">复制</div>
                            </li>
                            <li class="font clearfix" v-if="infoData.companyName">
                                <div class="fontLeft">公司</div>
                                <div class="fontCenter">{{infoData.companyName}}</div>
                                <div class="btn" v-clipboard:copy="infoData.companyName" v-clipboard:success="onCopy"
                                     v-clipboard:error="onError">复制</div>
                            </li>
                            <li class="font clearfix" v-if="infoData.jobNameOne">
                                <div class="fontLeft">荣誉</div>
                                <div class="fontCenter postName">{{infoData.jobNameOne}} {{infoData.jobNameTwo}}
                                    {{infoData.jobNameThree}}
                                </div>
                                <div class="btn"><a href=""></a></div>
                            </li>
                            <li class="font clearfix" v-if="infoData.code">
                                <div class="fontLeft">工号</div>
                                <div class="fontCenter">{{infoData.code}}</div>
                                <div class="btn"><a href=""></a></div>
                            </li>
                            <li class="font clearfix" v-if="infoData.wechatNumber">
                                <div class="fontLeft">微信号</div>
                                <div class="fontCenter">{{infoData.wechatNumber}}</div>
                                <div class="cardBtn"><a href=""></a></div>
                            </li>
                            <li class="font clearfix" v-if="infoData.personalIntro">
                                <div class="fontLeft">简介</div>
                                <div class="fontCenter personalIntro">{{infoData.personalIntro}}</div>
                                <div class="btn"><a href=""></a></div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 名片 end -->

            <!-- 至客户  begin-->
            <div class="statementContent">

                <div class="statementBox">
                    <div class="statement">
                        致客户：
                    </div>
                    <div class="statementTit">
                        尊敬的{{AssetData.customerName}}先生/女士：
                    </div>
                    <div class="statementTit block" >
                        <input type="checkbox"  @click="isInfoText">
                        <div class="case-block">
                            <div class="iconfont">&#xe60c;</div>
                            <div class="iconfont">&#xe632;</div>
                        </div>
                        <div class="detail">
                            {{isInfoTextState?isInfoTextD:isInfoTextD.slice(0,140)+'...'}}


                            <div class="statementTime" v-if="isInfoTextState">报告日期：{{AssetData.reportDate}}</div>
                        </div>

                    </div>
                </div>

            </div>
            <!-- 至客户  end---->
            <!--投资理财风险属性 start-->
            <div class="riskRateContent">

                <div class="riskRateBox">
                    <div class="ristRate">
                        <span>{{getRiskPropertiesData.riskLevelStr}}</span>
                        <span>重新评估</span>
                    </div>
                    <div class="riskRateDetail">
                        <ul>
                            <li><i></i><span>您的投资理财风险属性为：</span> <em>{{getRiskPropertiesData.riskLevelStr}}</em> <a
                                class="iconfont">&#xe677;</a></li>
                            <li><i></i><span>您的资产量级为：</span><em>{{getRiskPropertiesData.assetAmount}}</em></li>
                            <li>
                                <i></i><span>您对于资金的流动性要求为：金融资产的 <em>{{getRiskPropertiesData.financialRatio}}</em>  以下</span>
                            </li>
                            <li><i></i><span>您的投资经验为：</span><em>{{getRiskPropertiesData.investExper}}</em></li>
                            <li><i></i><span>您的生命周期处于：</span><em>{{getRiskPropertiesData.lifeCycleStr}}</em> <a
                                class="iconfont">&#xe677;</a></li>
                            <li><i></i><span>您对于保险的需求是: </span><em>{{getRiskPropertiesData.insureRequirement}}</em></li>
                        </ul>

                    </div>
                    <!--<div class="statementTime">报告日期：{{AssetData.reportDate}}</div>-->
                </div>

            </div>
            <!--投资理财风险属性 end-->


            <!-- 投资者画像 begin -->
            <!--<div class="portrayalContent">-->
            <!--<div class="portrayalBox">-->
            <!--<div class="portrayalTit">投资者画像测评</div>-->
            <!--<div class="padingL">-->
            <!--<div class="dimension">维度一：资产量级</div>-->
            <!--<div class="dimensionTxt">-->
            <!--恒天财富将投资者的资产量级分为 500 万元以下、500-1000 万元、1000-3000 万元、3000 万-1亿元、1 亿元以上。-->
            <!--</div>-->
            <!--<div class="dimensionTxt1">-->
            <!--您的资产量级为：{{AssetData.assetClass}}；属于 {{AssetData.assetClassRange}}-->
            <!--</div>-->

            <!--<div class="dimension">维度二：生命周期</div>-->
            <!--<div class="dimensionTxt">-->
            <!--恒天财富根据生命周期理论，将投资者的生命周期分为单身期、家庭形成期、家庭成长期、家庭成熟期和老年期。-->
            <!--</div>-->
            <!--<div class="dimensionTxt1">-->
            <!--您的生命周期处于：{{AssetData.lifeCycle}}-->
            <!--</div>-->
            <!--<div class="fontRed">-->
            <!--<div>{{AssetData.lifeTermContent}}</div>-->
            <!--</div>-->

            <!--<div class="dimension">维度三：风险偏好</div>-->
            <!--<div class="dimensionTxt">-->
            <!--恒天财富根据投资者的风险承受能力，将投资者分为保守型、稳健型、平衡型、成长型、进取型。-->
            <!--</div>-->
            <!--<div class="dimensionTxt1">-->
            <!--您的投资类型为：{{AssetData.investmentType}}-->
            <!--</div>-->
            <!--<div class="fontRed">-->
            <!--<div>{{AssetData.riskTypeContent}}</div>-->
            <!--</div>-->
            <!--</div>-->

            <!--</div>-->
            <!--</div>-->
            <!-- 投资者画像 end-- -->

            <!-- 风险建议扇行图 -->
            <div class="riskSuggestFan">
                <div class="riskSuggestTitle">
                    根据您的风险承受能力 建议您的资产配如下
                </div>
                <div class="chartBox" v-if="getchartsData.suggestedAllocationChart">
                    <div class="chartTile">建议配置比例</div>
                    <pie-charts :resArr="getchartsData.suggestedAllocationChart" id="funTu1"></pie-charts>
                </div>
                <div class="chartBox" v-if="getchartsData.currentAllocationChart">
                    <div class="chartTile">当前配置比例</div>
                    <pie-charts :resArr="getchartsData.currentAllocationChart" id="funTu2"></pie-charts>
                </div>

            </div>
            <!-- 资产配置调整建议 begin -->
            <div class="adjustSuggest">
                <div class="riskSuggestTitleLeft">
                    资产配置调整建议 <i class="smallTxt">(万元)</i>

                    <div class="riskSuggestTitleRight fr">
                        <i class="patch wg"></i>
                        <span>建议</span>
                    </div>
                    <div class="riskSuggestTitleRightB fr">
                        <i class="patch lg"></i>
                        <span>当前</span>
                    </div>
                </div>
                <div class="riskSuggestBot">
                    <ul>
                        <li v-for="(item,index) in getchartsData.adjustmentSuggestedChart"
                            v-if="getchartsData.adjustmentSuggestedChart.length>0">
                            <div class="title">
                                <i class="l-patch" :style="{background:item.color}"></i>
                                <span>{{item.type}}</span>
                                <span class="color_font"
                                      :style="{color:item.suggest-item.now >= 0 ?'#545861 ':'#10AA40'}"
                                      v-if="item.suggest&&item.now&&item.now!=0"
                                >
                                    {{item.suggest-item.now}}
                                </span>
                            </div>
                            <bar-charts :id="'barCharts'+index"
                                        :max="callMax(getchartsData.adjustmentSuggestedChart)"
                                        :now="item.now" :suggest="item.suggest"></bar-charts>

                        </li>
                        <li v-if="getchartsData.adjustmentSuggestedChart.length==0">
                            <div class="title">
                                <i class="l-patch" :style="{background:'#6A7EDA'}"></i>
                                <span>现金类</span>
                                <span class="color_font"
                                      :style="{color:'#545861'}">{{200000}}</span>
                            </div>
                            <bar-charts id="barCharts1" :now="200000"></bar-charts>
                        </li>
                    </ul>
                </div>

            </div>
            <!-- 资产配置调整建议 end -->

            <!--配置效果对比 star-->
            <div class="adjustSuggest">
                <div class="riskSuggestTitleLeft">
                    配置效果对比 <i class="smallTxt">(万元)</i>

                    <div class="riskSuggestTitleRight fr">
                        <i class="patch wg"></i>
                        <span>建议</span>
                    </div>
                    <div class="riskSuggestTitleRightB fr">
                        <i class="patch lg"></i>
                        <span>当前</span>
                    </div>
                </div>
                <div class="showoff">持有一年的表现（不含保障类、另类和海外类产品）</div>
                <doubleBarChart v-if="getchartsData.resultComparisonChart.oneYear"
                        :now="getchartsData.resultComparisonChart.oneYear.now"
                        :suggest="getchartsData.resultComparisonChart.oneYear.suggest" id="doublevhar"></doubleBarChart>
                <div class="showoff">持有三年的表现（不含保障类、另类和海外类产品）</div>
                <doubleBarChart  v-if="getchartsData.resultComparisonChart.threeYear"
                        :now="getchartsData.resultComparisonChart.threeYear.now"
                        :suggest="getchartsData.resultComparisonChart.threeYear.suggest" id="doublevhar1"></doubleBarChart>

            </div>
            <!--配置效果对比 end-->
            <!--配置效果对比 star-->
            <div class="adjustSuggest">
                <div class="riskSuggestTitleLeft">
                    历史走势模拟<i class="smallTxt">(近一年/不含保障类、另类和海外类产品)</i>
                </div>
                <line-chart ref="echartWrap"
                        :time="getchartsData.historicalTrendChart.time"
                            :chartDatas="getchartsData.historicalTrendChart.chartData"
                            id="lineChart" v-if="getchartsData.historicalTrendChart.chartData"></line-chart>
                <div class="describe">在推荐的比例下，恒天阿尔法证券指数的模拟收益率为：
                    <span v-if="getchartsData.historicalTrendChart.chartData">
                        {{getchartsData.historicalTrendChart.chartData[0].lineData[getchartsData.historicalTrendChart.chartData[0].lineData.length-1]}}
                    </span></div>
                <div class="describe">在推荐的比例下，市场组合表现的模拟收益率为：<span>99.99%</span></div>
                <div class="describe">在当前配置的比例下，资产配置组合的模拟收益率为：<span>99.99%</span></div>
            </div>
            <!--配置效果对比 end-->

            <!-- 根据您的产品选择 建议您的产品配置如下 end ---->


            <!-- 资产配置投资组合最终方案 begin -->
            <div class="ultimatelyScheme ">
                <div class="ultimatelySchemeTitle">
                    <div class="u-s-t-left">资产配置投资组合最终方案<br></div>
                    <span class="u-s-t-right fr">更改配置</span>
                </div>
                <div class="ultimatelySchemeTitle_b">(合计？？？？？万元）</div>
                <ul>
                    <li v-for="(item,index) in finalPlan">
                        <div class="tableTitle" :style="{color:matchColor(item.assetClassify)}">
                            {{item.assetClassify}}<span class="t-span little">总投资金额{{item.assetClassifyMoney}}万 占比{{item.assetClassifyRatio}}%</span>
                        </div>
                        <div class="tableChunk" v-for="(item1,index1) in item.types"
                            v-if="isTrue(item.assetClassify)"
                             :style="{background:matchBackColor(item.assetClassify)}">
                            <div class="chunkTitle">{{item1.subdivisionStrategy}}</div>
                            <table width="100%">
                                <tr cl>
                                    <th width="40%">产品名称</th>
                                    <th width="30%">目标金额</th>
                                    <th width="30%">目标占比</th>
                                </tr>
                                <tr v-for="(item2,index2) in item1.products">
                                    <td>{{item2.projectName}}</td>
                                    <td>{{item2.configMoney}}</td>
                                    <td>{{item2.configRatio}}%</td>
                                </tr>
                                <tr v-if="item1.products.length==0">
                                    <td>--</td>
                                    <td>--</td>
                                    <td>--</td>
                                </tr>
                            </table>
                        </div>
                        <div class="tableChunk" v-for="(item1,index1) in item.types"
                             v-if="!isTrue(item.assetClassify)&&item1.products.length>0"
                             :style="{background:matchBackColor(item.assetClassify)}">
                            <div class="chunkTitle" v-if="item1.products.length>0">{{item1.subdivisionStrategy}}</div>
                            <table width="100%" v-if="item1.products.length>0">
                                <tr cl>
                                    <th width="40%">产品名称</th>
                                    <th width="30%">目标金额</th>
                                    <th width="30%">目标占比</th>
                                </tr>
                                <tr v-for="(item2,index2) in item1.products">
                                    <td>{{item2.projectName}}</td>
                                    <td>{{item2.configMoney}}</td>
                                    <td>{{item2.configRatio}}%</td>
                                </tr>
                            </table>
                        </div>
                        <!--<div class="tableChunk"v-for="(item1,index1) in item.types"
                             v-if="item.assetClassify=='另类'||item.assetClassify=='证券类'&&judge(item.types)"
                             :style="{background:matchBackColor(item.assetClassify)}">
                            <div class="chunkTitle">{{item1.subdivisionStrategy}}</div>
                            <table width="100%">
                                <tr cl>
                                    <th width="40%">产品名称</th>
                                    <th width="30%">目标金额</th>
                                    <th width="30%">目标占比</th>
                                </tr>
                                <tr>
                                    <td>&#45;&#45;</td>
                                    <td>&#45;&#45;</td>
                                    <td>&#45;&#45;</td>
                                </tr>
                            </table>
                        </div>-->
                    </li>
                </ul>
            </div>


            <!-- 产品资产配置现状分析 begin -->
            <div class="analysis" v-if="imageData.assetNowPieChart">
                <div class="portrayalTit analysisMargin">客户资产配置现状分析</div>
                <img :src="imageData.assetNowPieChart" alt="">
            </div>
            <!-- 产品资产配置现状分析 end-- -->

            <!-- 户资产配置调整建议 begin -->
            <div class="adjust" v-if="imageData.assetRecommendLineChart">
                <div class="portrayalTit">客户资产配置调整建议</div>
                <img :src="imageData.assetRecommendLineChart" alt="">
            </div>
            <!-- 户资产配置调整建议 end----->


            <!-- 原持仓操作建议  begin-->
            <div class="salesBasepPlate">
                <div class="salesBasepPlateTit">原持仓操作建议 <i>(万元)</i> <span>调整持仓</span></div>
                <div class="salesBasepPlateEdit" v-show="false">
                    <button><i class="iconfont">&#xe65a;</i> 编辑持仓</button>
                </div>
                <div class="salesBasepPlateList" v-show="true">
                    <table width="100%">
                        <tr>
                            <th width="30%">产品名称</th>
                            <th width="20%">原持仓金额</th>
                            <th width="20%">目标金额</th>
                            <th width="30%">金额调整</th>

                        </tr>
                        <tr v-for="(item) in selectPositionsData">
                            <td >{{item.productName}}</td>
                            <td >{{item.originalAmount}}</td>
                            <td>{{item.targetAmmout}}</td>
                            <td :style="{color: item.adjustmentAmout < 0 ? '#FE4657 ':'#1D212B'}">
                                {{item.adjustmentAmout}}
                            </td>
                        </tr>
                    </table>
                </div>

            </div>
            <!-- 原持仓操作建议  end---->
            <div class="positionSuggest">
                <div class="positionSuggestTitle">
                    原持仓操作建议
                    <span class="little">(万元)</span>
                </div>
                <div class="p-s-table">
                    <div class="p-s-table-header">
                        <div>产品名称</div>
                        <div>原持有金额</div>
                        <div>目标金额</div>
                        <div>金额调整</div>
                    </div>
                    <div class="p-s-table-body">
                        <div>嘉实增强信用</div>
                        <div>200</div>
                        <div>0</div>
                        <div>{{0-200}}</div>
                    </div>
                    <div class="p-s-table-body">
                        <div>嘉实增强信用嘉实增强信用嘉实增强信用</div>
                        <div>150</div>
                        <div>100</div>
                        <div>{{100-150}}</div>
                    </div>
                </div>
            </div>
            <!-- 销售垫板  begin-->
            <div class="salesBasepPlate">
                <div class="salesBasepPlateTit">销售垫板 <span>编辑</span></div>
                <div class="salesBasepPlateEdit">
                    <button><i class="iconfont">&#xe65a;</i> 编辑内容</button>
                </div>
                <div class="salesBasepPlateList"></div>

            </div>
            <!-- 销垫板  end---->

            <!-- 宏观经济展望  begin-->
            <div class="appendix">
                <div class="portrayalTit appendixMargin">宏观经济展望及大类资产投资建议</div>
                <div class="block">
                    <input type="checkbox" @click="targetIsAll">
                    <div class="case-block">
                        <div class="iconfont1"></div>
                        <div class="iconfont2"></div>
                    </div>
                    <div ref="appendixTxt" class="appendixTxt" v-html="targetIsAllState?AssetData.macroEconomyContent:macroEconomyContent2"></div>
                </div>
            </div>
            <!-- 宏观经济展望  end---->

            <!-- 全生命周期 -->
            <div class="allLifeContent">
                <div class="portrayalTit">全生命周期资产配置模型介绍</div>
                <div class="block">
                    <input type="checkbox" @click="allLifeIsShow">
                    <div class="case-block">
                        <div class="iconfont">&#xe60c;</div>
                        <div class="iconfont">&#xe632;</div>
                    </div>

                    <div class="allLifeBox" v-if="allLifeState">
                        <div class='topText'>
                            <span>当前，国内经济换挡压力加大，海外政局变幻莫测，
                                全球经济下行态势显现。在此背景下，资产配置的重要性更加凸显，
                                成为了提升投资者组合收益的主要手段。因此，
                                恒天财富研究院重磅推出“全生命周期”资产配置模型，
                                以期抓住经济运行中各类资产所暴露的机会。
                            </span>
                            <b>
                                全生命周期资产配置模型由底层资产、客户画像以及配置策略三大维度构成，
                                致力于刻画清楚资产端、客户端的特征，并进行两端的精细化、
                                个性化匹配，以达到千人千面资产配置的目的。
                            </b>
                        </div>
                        <div class='imgBox'>
                            <img src="../../img/allLifeOne.png" alt="">
                        </div>
                        <div class='allLifeText'>
                            <img class='textIcon' src="../../img/textIcon.png" alt="">
                            <div class='textContent'>
                                <i>精研细琢选资产：</i>
                                <span>按照高净值客户的四种资产配置需求，将底层资产对应分成四大类别（保障型、消费型、保值型和增值型），以实现高净值客户的全资产配置。</span>
                                <div class='textContenttwo'>
                                    <div class='circle'></div>
                                    <div class='textContent'>
                                        <i>保障型资产：</i>
                                        <span>这部分资金专款专用，实现完整的生命风险保障。主要资产类别为避险资产和刚需型投资，
                                例如各类保险产品、家族信托、移民以及海外置业。</span>
                                    </div>
                                </div>
                                <div class='textContenttwo'>
                                    <div class='circle'></div>
                                    <div class='textContent'>
                                        <i>消费型资产：</i>
                                        <span>这部分资金用于满足家庭日常开支，要求安全性第一，流动性第二，
                                收益性第三。主要资产类别为流动性资产（现金及活期存款、货币型基金、短期理财等）。</span>
                                    </div>
                                </div>
                                <div class='textContenttwo'>
                                    <div class='circle'></div>
                                    <div class='textContent'>
                                        <i>保值型资产：</i>
                                        <span>保值型资产的主要目的是实现资产的保值，其次才是增强收益。
                                主要资产类别为标类固定收益产品(各类债券基金)和非标固收产品（信托、定向融资工具）
                                及海外类固收产品（优先级私募债、私募信贷基金、公募债券基金等）。</span>
                                    </div>
                                </div>
                                <div class='textContenttwo'>
                                    <div class='circle'></div>
                                    <div class='textContent'>
                                        <i>增值型资产：</i>
                                        <span>首要目标是增值，能承受一定风险希望获取超额收益。
                                主要资产类别为权益类基金产品（公私募股票型基金、股权投资基金）
                                和另类基金产品（房地产基金、不良资产基金、海外私募股权基金）。</span>
                                    </div>
                                </div>


                            </div>
                        </div>
                        <div class='imgBox'>
                            <img src="../../img/allLifeTwo.png" alt="">
                        </div>
                        <div class='allLifeText'>
                            <img class='textIcon' src="../../img/textIcon.png" alt="">
                            <div class='textContent'>
                                <i>量身定制作画像：</i>
                                <span>模型从生命周期、资产量级和风险偏好三个角度对客户做画像，
                        用16个指标将客户类型划分成150种个例，
                        以实现客户画像的全角度剖析。</span>
                                <div class='textContenttwo'>
                                    <div class='circle'></div>
                                    <div class='textContent'>
                                        <i>生命周期：</i>
                                        <span>生命周期理论是指导个人理财的核心理论之一。一个人处在不同的生命阶段，
                                对于财产的配置需求会有很大区别，通过生命周期理论将人生合为一个整体出发来考虑配置，
                                将使得个人财富能够合理的分配到生命的各个阶段。因此，我们根据生命周期理论，
                                将客户生命周期分为单身期、家庭形成期、家庭成长期、家庭成熟期和老年期，
                                随着年龄和家庭的逐渐成熟，可承受的投资风险通常依次下降。</span>
                                    </div>
                                </div>
                                <div class='textContenttwo'>
                                    <div class='circle'></div>
                                    <div class='textContent'>
                                        <i>资产量级：</i>
                                        <span>资产量级会直接影响资产配置的风险偏好和投资标的，
                                因此我们将资产量级作为非常重要的一个维度引入到客户画像中。
                                我们将高净值客户的资产量级分为500万元以下、500-1000万元、1000-3000万元、
                                3000万-1亿元、1亿元以上这五大类别。随着资产量级的增加，客户的风险偏好由低到高。</span>
                                    </div>
                                </div>
                                <div class='textContenttwo'>
                                    <div class='circle'></div>
                                    <div class='textContent'>
                                        <i>风险偏好：</i>
                                        <span>风险偏好即是高净值客户对于投资中收益和风险的态度。我们根据客户风险评价模型，
                                将客户按照风险承受能力由低到高的划分为保守型、稳健型、平衡型、成长型和进取型这五种。</span>
                                    </div>
                                </div>


                            </div>
                        </div>
                        <div class='imgBox'>
                            <img src="../../img/allLifeThree.png" alt="">
                        </div>
                        <div class='allLifeText'>
                            <img class='textIcon' src="../../img/textIcon.png" alt="">
                            <div class='textContent'>
                                <i>分层分步定策略：</i>
                                <span>以风险预算模型为基础，采用定性与定量相结合的方式，分层分步实现高净值客户的全生命周期资产配置，
                        再结合客户风险偏好调整，为客户提供定制化的产品配置策略。</span>
                            </div>
                        </div>
                        <div class='imgBox'>
                            <img src="../../img/allLifeFour.png" alt="">
                        </div>

                    </div>
                    <div class="allLifeBox" v-else="allLifeState">
                        <div class='topText'>
                            <span>当前，国内经济换挡压力加大，海外政局变幻莫测，
                                全球经济下行态势显现。在此背景下，资产配置的重要性更加凸显，
                                成为了提升投资者组合收益的主要手段。因此，
                                恒天财富研究院重磅推出“全生命周期”资产配置模型，
                                以期抓住经济运行中各类资产所暴露的机会。
                            </span>
                            ...
                        </div>
                    </div>
                </div>
            </div>

            <!-- 免责声明 begin -->
            <div class="disclaimer">
                <div class="portrayalTit">免责声明</div>
                <div class="block">
                    <input type="checkbox" @click="isShowText">
                    <div class="case-block">
                        <div class="iconfont">&#xe60c;</div>
                        <div class="iconfont">&#xe632;</div>
                    </div>

                    <div class="disclaimerTxt">
                        {{disclaimerState?disclaimerTxt:disclaimerTxt.slice(0,120)+'...'}}
                    </div>
                </div>
            </div>
            <!-- 免责声明 end----->

            <div class="qrCode ">
                <div class="clearfix">
                    <div class="qrCodeL">
                        <img src="../../img/caiyanhshe.jpg" alt="财研社">
                    </div>
                    <div class="qrCodeR">
                        <img src="../../img/ht.jpg" alt="恒天财富APP">
                    </div>
                </div>

                <div class="clearfix txtMargin">

                    <div class="floatLTxtL">
                        <p v-if="isWechat">长按此二维码关注</p>
                        <p v-if="!isWechat">扫描此二维码关注</p>
                        <p class="nameMargin">“财研社”</p>
                    </div>
                    <div class="floatRTxtR">
                        <p v-if="isWechat">长按此二维码关注</p>
                        <p v-if="!isWechat">扫描此二维码关注</p>
                        <p class="nameMargin">“恒天财富APP”</p>
                    </div>
                </div>

            </div>
            <div class="downLoad" v-show="isDownLoad">
                <img class="logo" src="../../img/heng.png" alt="">
                <span>了解更多公司及产品信息 请</span>
                <a href="javascript:;" @click="register">注册</a>
                <span> 或 </span>
                <a href="javascript:;" @click="downLoad">下载</a>
                <span>恒天财富APP</span>
            </div>
            <div class="downLoadFixBox" v-show="isShow">
                <div class="downLoadFix">
                    <div class="circleSmall" @click="close">
                        <div class="circleSmallX">×</div>
                    </div>
                    <img class="logo" src="../../img/heng.png" alt="">
                    <span>了解更多公司及产品信息 请</span>
                    <a href="javascript:;" @click="register">注册</a>
                    <span> 或 </span>
                    <a href="javascript:;" @click="downLoad">下载</a>
                    <span>恒天财富APP</span>
                </div>
            </div>
            <div class="white" v-show="isWhite"></div>
            <div class="fill" v-show="isFill"></div>
            <!-- 理顾二维码弹窗 begin -->


            <div class="alertBody" v-show="alertShow">
                <div class="alertBox">
                    <div class="noQrcode" v-if="noQrcodeShow">
                        <div class="alertCenterBox">
                            <div class="noQrImg">
                                <img src="../../img/cry.png" alt="">
                            </div>
                            <div class="noQrTip">
                                <p>该理顾还没有专属微信名片</p>
                                <p>您可点击拨打电话直接联系该理顾</p>
                            </div>
                        </div>
                        <a href="javaScript:;" id="phoneToPlanner" class="phoneToPlanner" @click="touchPh()">联系理顾</a>
                    </div>
                    <div class="haveQrcode" v-if="haveQrcodeShow">
                        <div class="alertCenterBox">
                            <img :src="infoData.wxQrCode" alt="二维码">
                        </div>
                        <div class="haveQrcodeTip">扫描或长按识别二维码 添加微信</div>
                    </div>
                    <div class="closeBtnBox" @click="closeAlertBox()">
                        <img src="../../img/shanchu.png" alt="">
                    </div>
                </div>
                <!--理顾二维码弹窗 end&#45;&#45;-->

                <!--生成报告按钮 start-->
                <button class="generateReport">生成资产配置建议书</button>
                <!--生成报告按钮 end-->
            </div>
        </div>
        <button class="generateReport1" @click="jianyan">生成资产配置建议书</button>
    </section>

</template>

<script>

import "./assetReport.less";

//黑条提示
// import tipAction from "@common/components/otherComponents/tipAction/tipAction"
import tablea from '@src/common/table/table'
import pageTitle from '@src/common/pageTitle/pageTitle'
import pieCharts from './piecharts.vue'
import barCharts from './barCharts.vue'
import doubleBarChart from './doubleBarCharts'
import lineChart from './lineCharts.vue'

export default {
    name: "assetReport",
    components: {
        tablea, pageTitle, pieCharts, barCharts, doubleBarChart, lineChart
    },
    data() {
        return {
            // riskSuggest: [
            //     {
            //         name: "现金类",
            //         now: 500,
            //         suggest: 100,
            //         color: '#6A7EDA'
            //     },
            //     {
            //         name: "债权类",
            //         now: 500,
            //         suggest: 100,
            //         color: '#78AEE5 '
            //     }, {
            //         name: "证券类",
            //         now: 500,
            //         suggest: 100,
            //         color: '#8FDADF'
            //     }, {
            //         name: "另类",
            //         now: 500,
            //         suggest: 100,
            //         color: '#F8DB84'
            //     }, {
            //         name: "海外类",
            //         now: 500,
            //         suggest: 100,
            //         color: '#F1AC8B'
            //     }, {
            //         name: "保障类",
            //         now: 500,
            //         suggest: 100,
            //         color: '#DE7673'
            //     }
            // ],
            // recommendedData: [
            //     {value: 350, name: '现金类'},
            //     {value: 234, name: '债权类'},
            //     {value: 310, name: '证券类'},
            //     {value: 154, name: '另类'},
            //     {value: 135, name: '保障类'},
            //     {value: 1548, name: '海外类'}
            // ],
            // suggestData: [
            //     {value: 350, name: '现金类'},
            //     {value: 234, name: '债权类'},
            //     {value: 310, name: '证券类'},
            //     {value: 154, name: '另类'},
            //     {value: 135, name: '保障类'},
            //     {value: 1548, name: '海外类'}
            // ],
            AssetData: {},
            AssetData1: {},
            imageData: {},
            infoData: {},
            mobileFunction: '',
            alertShow: false, // 二维码弹窗展示
            noQrcodeShow: false, // 二维码弹窗没有二维码
            haveQrcodeShow: false, // 二维码弹窗有二维码
            haveQrcodeUrl: '', //  二维码弹窗有二维码图片地址
            packUpShow: true, // 收起名片
            isOnece: true, // mui scroll 只执行一次
            isWechat: true, // 是否是微信浏览器
            isDownLoad: false,
            flag: false,
            flag1: false,
            classFlag: false,
            classFlag1: false,
            isShow: false,
            t1: 0,
            t2: 0,
            timer: null,
            isClose: false,
            isFill: false,
            isWhite: false,
            tab: '1',
            ruleTitle: '编辑预览',
            girPng: require('../../img/girl.png'),
            boyPng: require('../../img/boy.png'),
            backUrl: '',
            finalPlan: '',//最终配置方案
            totalMon: '',
            color: '#5BA0F0',
            background: '#EEF5FD',
            getRiskPropertiesData: {},
            selectPositionsData: [],
            getchartsData: {
                adjustmentSuggestedChart: [],// 资产配置建议调整数据 barchart
                suggestedAllocationChart: [],//根据风险承受能力配置 建议配置比例piechart
                currentAllocationChart: [],// 根据风险承受能力配置当前配置比例
                resultComparisonChart:{}, //持有一年和三年的表现
                historicalTrendChart:[],// 历史走势图
            }, // 4个图表数据
            disclaimerTxt:'本报告内容仅供一般参考，不应被当作投资策略建议，也不构成针对任何证券或其它金融工具的邀约、推荐或建议。本文件只作一般评估，并未考虑任何特定人士或群体的具体投资目标、财务状况、特定需求等，亦非专为任何特定人士或群体编制。虽然本文所使用的信息来源可靠，但“恒天财富”并不保证其准确性和完整性，也不对使用本报告所包含的材料产生的任何直接或间接损失以及信息遗漏负责。本报告中涉及的投资性产品的过去绩效并不代表其未来表现，任何证券或其他金融工具均可能存在重大风险，可能不适用于所有投资者。本报告涉及的证券或金融工具的价格、价值以及收益会受到经济环境的影响而波动，报告中的观点、预测并不是未来实际表现，“恒天财富”可以在不发出通知的情况下做出更改，同时“恒天财富”并不承担提示这些注意事项的责任。本报告中的任何观点与预测，仅反映“恒天财富”研究院在发布该报告当日的分析师判断，并不代表“恒天财富”任何部门。未经“恒天财富”事先书面授权，任何人不得以任何目的复制、发送或销售本报告。“恒天财富”版权所有，保留一切权利。',
            disclaimerState:false,
            allLifeState:false,
            targetIsAllState:false,
            macroEconomyContent2:'',
            isInfoTextState:false,
            isInfoTextD:'感谢您抽出宝贵的时间配合，我们承诺对您的信息严格保密。本《全生命周期资产配置建议书》由恒天财富研究院专家团队出品，为您提供包含5部分的内容：\n' +
                '                            1、2020年宏观经济展望及大类资产投资建议，从宏观层面把握资本市场的总体变动趋势，判断资产的投资价值。\n' +
                '                            2、全生命周期资产配置模型介绍。详细介绍全生命周期资产配置模型三大维度，以及配置逻辑。\n' +
                '                            3、投资者画像测评。从生命周期、资产量级、风险偏好这三个维度，依据您所提供的信息，生成您的自然人投资者画像。\n' +
                '                            4、投资者资产配置及投资建议。基于上述结果以及各类资产的属性特征，为您定制详尽的资产配置方案。当然，您也可以根据个人信息的更迭，调整您的资产配置组合。\n' +
                '                            5、投资者资产配置现状分析及调整方案。通过对您及家人资产情况的信息收集与测算，全面分析解读您目前的资产配置现状。\n' +
                '                            我们相信通过这套科学的分析系统，可以帮助您优化投资的风险收益比，更加有效地管理您的财富。\n' +
                '                            我们建议您结合自身的资产状况及市场变动情况，定期分析资产配置现状，动态掌握您的投资状况。\n' +
                '                            如果您对《建议书》有任何问题或者需求，欢迎您随时与恒天客户服务团队联系。联系电话400-8980-618，电子邮箱htkf@chtwm.com。'
        };
    },
    created() {
        this.isWeiXin();
        this.initData();
        this.$nextTick(() => {
            this.getecharts()
        })
    },

    mounted() {
        if (this.isWechat) {
            window.addEventListener('scroll', this.handleScroll, true);  // 监听（绑定）滚轮滚动事件
        }
        ;
    },

    updated() {
        if (this.isOnece) {
            mui('.mui-scroll-wrapper').scroll({
                scrollX: true, //是否横向滚动
                deceleration: 0 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            });
        }
        ;
        this.isOnece = false;
    },

    watch: {
        AssetData() {
            this.nameCard();
        },
        // getchartsData() {
        //     this.getcharts()
        // }
    },
    methods: {
        callMax(arr){
            let mArr=[];
            arr.map(i=>{
                mArr.push(i.now)
                mArr.push(i.suggest)
            })
            return Math.max(...mArr)
        },
        isTrue(cl){
            return cl=='另类'||cl=='证券类'

        },
        judge(arr){
            arr.map(i=>{
                return i.products.length
            })
        },
        isInfoText(e){
            this.isInfoTextState=e.target.checked
        },
        isShowText(e){
            this.disclaimerState=e.target.checked
        },
        allLifeIsShow(e){
            this.allLifeState=e.target.checked
        },
        targetIsAll(e){
            this.targetIsAllState=e.target.checked

        },
        dataURLtoFile(dataurl, filename) {//将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）
            let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, {type:mime});
        },
        jianyan(){
            //console.log(this.dataURLtoFile(this.$refs.echartWrap.getDraw(),'111.jpg'))
            let file=this.dataURLtoFile(this.$refs.echartWrap.getDraw(),'111.jpg')//文件对象
        },
        matchColor(item) {
            if (item == '现金类' || item == '债权类' || item == '证券类') {
                return '#5BA0F0'
            } else if (item == '另类' || item == '海外类') {
                return '#26B3BC'
            } else if (item == '保障类') {
                return '#FF6500'
            }

        },
        matchBackColor(item) {
            if (item == '现金类' || item == '债权类' || item == '证券类') {
                return '#EEF5FD'
            } else if (item == '另类' || item == '海外类') {
                return '#EEF9FA'
            } else if (item == '保障类') {
                return '#FFF6F0'
            }
        },
        initData() {
            this.$axiosHttp.http({
                    name: '',
                    url: apiUrl.getAssetConfigReportImagesApi,
                    needFailCallback: false,
                    method: 'GET',
                    params: {assetConfigId: btoa(splitUrl()['assetConfigId'])}
                }, (res) => {
                    this.imageData = res.data.data;

                }
                // ,res => {
                //     tipAction(res.data.message);
                // }
            );
            this.AssetConfigReport()
            this.getecharts()
            this.RiskProperties()
            this.selectPositions()
            this.selectAssetAllocationProducts()

        },
        /*字符串转dom对象*/
        parseDom(arg) {
            var objE = document.createElement("div");
            objE.innerHTML = arg;
            return objE.childNodes;
        },
        /*dom对象转字符串*/
        htmlDOMtoString (HTMLDOM){
            var div = document.createElement("div")
            for(let i in HTMLDOM){
                if(HTMLDOM[i] instanceof HTMLElement){
                    div.appendChild(HTMLDOM[i])
                }
            }
            return div.innerHTML
        },
        isContent(innerText){
            let han=/^[\u4e00-\u9fa5]+$/;
            let arr=innerText.slice(0,12).split('')
            let a=0
            console.log(arr)
            arr.map(i=>{
                if(han.test(i)){
                    a++
                }
            })
            return a>=5

        },
        AssetConfigReport() {
            //获取资产配置报告的数据
            this.$axiosHttp.http({
                    name: '',
                    url: apiUrl.getAssetConfigReportDataApi,
                    needFailCallback: false,
                    method: 'GET',
                    params: {assetConfigId: btoa(splitUrl()['assetConfigId']), tableSwitch: btoa('v2.7.5')}
                }, (res) => {
                    //console.log(res, '获取资产配置报告的数据')
                    this.AssetData = res.data.data;
                    this.flag = true;
                    let htmldom=this.parseDom(this.AssetData.macroEconomyContent)
                    let strLength=0,nodeList=[],textLength=112;
                    for(let i in htmldom){
                        if(this.isContent(htmldom[i].innerText)){
                            strLength=strLength+htmldom[i].innerText.length
                            if(strLength>textLength){
                                let h=0,beforeLength=0;
                                while(h<i){
                                    if(this.isContent(htmldom[h].innerText))
                                        beforeLength=beforeLength+htmldom[h].innerText.length
                                    h++;
                                }
                                let cutOutLength=textLength-beforeLength
                                htmldom[i].innerHTML=htmldom[i].innerText.slice(0,cutOutLength)+'...'
                            }
                            nodeList.push(htmldom[i])
                        }
                        if(strLength>textLength){
                            break;
                        }
                    }
                    this.macroEconomyContent2=this.htmlDOMtoString(nodeList)

                }
            );
        },
        selectAssetAllocationProducts() {
            // 获取资产配置最终方案
            this.$axiosHttp.http({
                    name: '',
                    url: apiUrl.selectAssetAllocationProductsApi,
                    needFailCallback: false,
                    method: 'POST',
                    params: {assetConfigId: btoa(splitUrl()['assetConfigId'])}
                }, (res) => {
                    const {data: {data}} = res
                    // this.totalMon = data.sum

                    this.finalPlan = data.classifys


                }
            );
        },
        selectPositions() {
            // 原持仓回显
            this.$axiosHttp.http({
                    name: '',
                    url: apiUrl.selectPositions,
                    needFailCallback: false,
                    method: 'POST',
                    params: {assetConfigId: btoa(splitUrl()['assetConfigId'])}
                }, (res) => {
                    const {data: {data}} = res
                    // this.totalMon = data.sum
                    //console.log(data, 'selectPositions')
                    this.selectPositionsData = data


                }
            );
        },
        getecharts() {
            //页面图表echarts数据
            this.$axiosHttp.http({
                    name: '',
                    url: apiUrl.getcharts,
                    needFailCallback: false,
                    method: 'POST',
                    params: {assetConfigId: btoa(splitUrl()['assetConfigId'])}
                }, (res) => {
                    const {data: {data}} = res
                // {time: new Date().getTime()}
                    this.getchartsData = data
                    // let time = 'time'
                // this.getchartsData.suggestedAllocationChart.push(new Date().getTime())

                //(this.getchartsData.historicalTrendChart, 'getcharts')


                }
            );
        },

        RiskProperties() {
            // 风险属性
            this.$axiosHttp.http({
                    name: '',
                    url: apiUrl.getRiskProperties,
                    needFailCallback: false,
                    method: 'POST',
                    params: {assetConfigId: btoa(splitUrl()['assetConfigId'])}
                }, (res) => {
                    const {data: {data}} = res
                    //console.log(data, 'getRiskProperties')
                    this.getRiskPropertiesData = data

                }
            );
        },
        // 拨打电话方法
        touchPh() {
            var obj = {
                phone: this.infoData.mobile
            }
            window.jsObj.callPhone(JSON.stringify(obj))
        },

        // 理顾名片
        nameCard() {
            this.$axiosHttp.http({
                    name: '',
                    url: apiUrl.infoApi,
                    needFailCallback: false,
                    method: 'GET',
                    params: {empNo: btoa(this.AssetData.empNo)}
                }, (res) => {
                    this.infoData = res.data.data;
                    this.mobileFunction = "tel:" + this.infoData.mobile;
                    if (this.infoData.wxQrCode == '' || this.infoData.wxQrCode == null) {
                        this.noQrcodeShow = true;
                    } else {
                        this.haveQrcodeShow = true;
                    }
                }
                // ,res => {
                //     tipAction(res.data.message);
                // }
            )
        },

        // 打开pdf报告
        produce: function () {
            // tab = 1 具体产品   tab = 2 产品类型
            let tableSwitch = this.tab == 1 ? 'v2.7.5' : 'v3.0.1';
            //打开pdf
            window.location.href = apiUrl.downloadPdfReportApi + '?assetConfigId=' + splitUrl()['assetConfigId'] + '&customerName=' + splitUrl()['customerName'] + '&tableSwitch=' + tableSwitch;
        },

        // 打开微信二维码弹窗
        touchQr: function () {
            this.alertShow = true;
        },

        // 收起名片
        packUp: function () {
            this.packUpShow = true;
        },

        // 展开名片
        packDown: function () {
            this.packUpShow = false;
        },

        // 复制成功
        onCopy: function (e) {
            this.$toast("复制成功");
        },

        // 复制失败
        onError: function (e) {
            alert("复制失败");
        },

        // 关闭二位码弹窗
        closeAlertBox: function () {
            this.alertShow = false;
        },

        // 判断是否是微信浏览器
        isWeiXin: function () {
            var ua = window.navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                this.isWechat = true;
                this.isFill = true;
                this.downLoadFun();
            } else {
                this.isWechat = false;
                this.isDownLoad = false;
                this.isWhite = true;
            }
        },

        // 注册跳转
        register: function () {
            window.location.href = "https://wap.chtwm.com/user/views/register.html";
        },

        // 下载
        downLoad: function () {
            window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.chtwm.mall&from=groupmessage";
        },

        // 关闭下载注册浮窗
        close: function () {
            this.isShow = false;
            this.isDownLoad = true;
            this.isClose = true;
            this.isFill = false;
            this.isWhite = true;
        },

        // 浮窗展示逻辑
        downLoadFun: function () {
            let _this = this;
            if (this.isWechat) {
                var showTimeInterval = setInterval(function () {
                    _this.isShow = true;
                    clearInterval(showTimeInterval);
                }, 5000)
            }
        },

        // 滚动事件
        handleScroll: function () {
            let _this = this;
            _this.isShow = false;
            clearTimeout(_this.timer);
            _this.timer = setTimeout(_this.isScrollEnd, 3000);
            _this.t1 = document.documentElement.scrollTop || document.body.scrollTop;
        },
        isScrollEnd: function () {
            this.t2 = document.documentElement.scrollTop || document.body.scrollTop;
            if (this.t2 == this.t1) {
                if (!this.isClose) {
                    this.isShow = true;

                }
            }
        },
        tabClick: function (num) {
            num == 1 ? this.tab = 1 : this.tab = 2;
            let tabNum = {tab: num};
            window.jsObj.tabClass(JSON.stringify(tabNum));
        }
    }
};

</script>
